<template>
  <div>
    <div class="marBox">
      <el-button icon="el-icon-back" @click="goBlack" size="small"></el-button>
    </div>
    <div class="marBox">
      <el-input v-model="title" placeholder="标题"></el-input>
    </div>
    <div class="marBox">
      <el-tag
        v-for="tag in activeTag"
        :key="tag.tagId"
        @close="tagRemove(tag)"
        color="white"
        closable
      >{{tag.name}}</el-tag>
      <el-popover placement="bottom" width="400" trigger="click">
        <div class="marBox tagSelBox">
          <el-tag :key="tag.tagId" @click="tagClick(tag)" v-for="tag in unActiveTag">{{tag.name}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">新增标签</el-button>
        </div>
        <el-button icon="el-icon-plus" size="small" slot="reference">添加标签</el-button>
      </el-popover>
    </div>
    <mavon-editor ref="mar" :content="content" />
    <div class="marBox">
      <el-button @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import mavonEditor from "@/components/mavonEditor";
export default {
  components: {
    mavonEditor
  },
  props: ["blogObj"],
  data() {
    return {
      content: "", // 输入的markdown
      blogId:'',
      userId:'',
      themeList: ["github", "dark", "github-gist", "idea", "ascetic"],
      theme: "github",
      title: "",
      tagList: [],//所有的tag
      formTagList: [],//选中的tag
      inputVisible: false,
      inputValue: "",
      subType:1,//提交类型1，新增2修改
    };
  },
  computed:{
    activeTag(){
      return this.tagList.filter(item=>this.formTagList.indexOf(item.tagId)!==-1)
    },
    unActiveTag(){
      return this.tagList.filter(item=>this.formTagList.indexOf(item.tagId)===-1)
    }
  },
  created() {
    this.getAllTag();
    if(this.blogObj && this.blogObj.blogId){
      this.content=this.blogObj.content;
      this.blogId=this.blogObj.blogId;
      this.title=this.blogObj.title;
      this.userId=this.blogObj.userId;
      let list=[];
      this.blogObj.tags.filter(item=>{
          list.push(item.tagId)
      })
      this.formTagList=list;
      this.subType=2;
    }
  },
  methods: {
    submit() {
      let marValue = this.$refs.mar.getMarkDownVal();
      console.log(marValue);
      let type=this.subType===1?'put':'post';
        this.$axios({
            method: type,
            url: '/api/blog',
            data:{
              title: this.title,
              content: marValue.content,
              htmlContent: marValue.html,
              tags:this.formTagList,
              blogId:this.blogId||null,
              userId:this.userId||1,
            }
        }).then(res => {
          this.$emit('gotoIndex');
        });
        
    },
    getAllTag() {
      this.$axios.get("/api/tag").then(res => {
        this.tagList = res.data;
        this.tagList.filter(item => {
          item.isSel = false;
        });
      });
    },
    tagClick(tag) {
      if (this.formTagList.length < 3) {
        this.formTagList.push(tag.tagId)
      }else{
          this.$message.warning('最多只能添加3条标签');
      }
    },
    tagRemove(tag) {
      this.formTagList.splice(this.formTagList.indexOf(tag.tagId),1)
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.$axios.put("/api/tag", { name: inputValue }).then(res => {
          this.tagList.push(res.data)
        });
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    goBlack(){
      this.$emit('gotoIndex')
    }
  }
};
</script>
<style lang="scss" scoped>
.marBox {
  margin: 10px 0px;
}
.el-tag {
  margin-right: 10px;
  cursor: pointer;
}
.tagSelBox{
    .el-tag{
        margin-bottom: 10px;
    }
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
